<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="form.css">
    <script type="text/javascript" src="zepto.js"></script>

    <script type="text/javascript">
        var files = [];

        function selectFile(e) {

            var timesamp = new Date().valueOf();
            var tmpFiles = e.target.files;
            for(var i = 0;i < tmpFiles.length;i ++){
                var file = tmpFiles[i];

                files.push({
                    file : file,
                    key : timesamp
                });

                var fileReader = new FileReader();

                var tmp = timesamp;
                fileReader.onload = function (res) {
                    $('#img-preview').append("<div class='img'><img src='" + res.target.result + "'/><div class='bar'><div class='progress' id='progress-"
                        + tmp + "'><span id='progress-text-" + tmp + "'></span></div></div></div>");
                }
                fileReader.readAsDataURL(file);
                timesamp ++;
            }
        }

        Zepto(function ($) {
            $("#submit").click(function () {
                if(files.length == 0){
                    alert("请选择图片");
                    return;
                }



                for(var i = 0;i < files.length;i ++){
                    var obj = files[i];
                    var file = obj.file;

                    var formData = new FormData();
                    formData.append("file", file, file.name);
                    $.ajax({
                        url : "/test/file_upload.php",
                        type : "POST",
                        processData : false,
                        contentType : false,
                        data : formData,
                        success : function (data) {
                            console.log("result = " + data);
                        },
                        beforeSend : function (xhr, settings) {
                            xhr.upload.onprogress = function (e) {

                                var proress = e.loaded / e.total;
                                var value = parseInt(proress * 100) + "%";

                                $("#progress-" + obj.key).css('width', value);
                                $("#progress-text-" + obj.key).html(value);

                                console.log("#progress-" + obj.key);
                                console.log("#progress-" + i);
                                console.log(value);
                                console.log(proress);

                            }
                        }
                    })
                }
            })
        })

    </script>
</head>
<body>
<div class="form-div">

        <label class="file-upload-btn" for="other_inputFile" id="other_inputFile_label">上传文件</label>
        <input multiple="multiple" type="file" class="input-file" id="other_inputFile" name="reasonImg" onchange="selectFile(event)"/>

    <button id="submit">提交</button>
</div>

<div class="img-preview" id="img-preview">

</div>


</body>
</html>